<script setup lang="ts">
import {ref} from 'vue'
 const fee = ref(0)
 const minWithdrawNum = ref(0)
 const minChargeCheck = ref(0)
 const fsConfig = ref([{
  range:"Level1",
  num:0.001
 }])
</script>

<template>
<div>
   <el-card>
      <div class="title">提现设置</div>
      <div class="flexitem">
        提现手续费：
        <el-input
          class="input"
          v-model="fee"
          placeholder="提现手续费"
        >
          <template v-slot="append">%</template>
        </el-input>
      </div>
      <div class="flexitem top10">
        最低提现金额：
        <el-input
          class="input"
          v-model="minWithdrawNum"
          placeholder="最低提现金额："
        />
      </div>
      <div class="flexitem top10">
        最低提现需审核金额：
        <el-input
          class="input"
          v-model="minChargeCheck"
          placeholder="最低提现需审核金额：："
        />
      </div>
      <div class="title top30">反水设置(日流水)</div>
       <div v-for="(item,index) in fsConfig" :key="index" class="flexitem top10">
        {{item.range}}：
        <el-input
          class="input"
          v-model="item.num"
          placeholder="积分(Min)"
        />
        <div style="margin-left: 10px;">～</div>
         <el-input
          class="input"
          v-model="item.num"
          placeholder="积分(Max)"
        />
        <el-button type="primary" style="margin-left: 10px;">添加</el-button>
      </div>
      <el-button type='primary' class="top30">提交</el-button>
   </el-card>
</div>
</template>

<style lang="scss" scoped>
.title{
  font-size: 16px;
  margin-bottom: 20px;
  font-weight: bold;
}
.top10{
  margin-top: 10px;
}
.top30{
  margin-top: 30px;
}
.flexitem{
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 14px;
  .input{
    width:120px;
    margin-left: 10px;
  }
}

</style>
